<template>
	<div id="order" @click="hideTab">
		<van-nav-bar fixed style="z-index:1001">
			<div slot="title">
				{{title}}
				<span class="down" @click="show_tab"></span>
				<div class="down_tab" v-if="isShow" @click="changeTitle($event)">
					<span>京东订单</span>
					<span>顺丰订单</span>
					<span>京东订单</span>
					<span>京东订单</span>
				</div>
			</div>
			<van-icon name="arrow-left" slot="left" color="black" @click="$router.go(-1)"/>
		</van-nav-bar>
		<van-tabs v-model="active" class="mytab" sticky :offset-top="40" style="z-index:1000">
		  <van-tab title="我的订单">
		  	<van-list v-model="loading">
			  	<div class="box" style="margin-top:50px">
			  		<div class="active">全部订单</div>
			  		<div>已付款</div>
			  		<div>已结算</div>
			  		<div>已失效</div>
			  	</div>

			  	<div class="box2">
			  		<van-row type="flex" justify="center">
					  <van-col span="8">订单数</van-col>
					  <van-col span="8">付款金额</van-col>
					  <van-col span="8">预估抽成</van-col>
					</van-row>
					<van-row type="flex" justify="center" style="padding-top:1rem">
					  <van-col span="8">2</van-col>
					  <van-col span="8">￥0.00</van-col>
					  <van-col span="8">￥0.00</van-col>
					</van-row>
			  	</div>

			  	<div class="box3">
			  		<div class="box_top">
			  			<div class="top_left">
			  				已失效
			  			</div>
			  			<div class="top_right">
			  				订单编号：225415441778
			  			</div>
			  		</div>
			  		<div class="box_middle">
			  			<div class="middle_left">
			  				<img src="/static/img/good.png" alt="">
			  			</div>
			  			<div class="middle_right">
			  				巴诺斯顿风暖浴霸，集成吊顶风暖浴霸，多功
							能纤维金属，超博空调型浴霸
			  			</div>
			  		</div>
			  		<div class="box_center">
			  			<div class="center_left">
			  				<p>付款金额</p>
			  				<p>￥0.00</p>
			  			</div>
			  			<div class="center_right">
			  				<p>预估抽成</p>
			  				<p style="color:#ff681f">￥0.00</p>
			  			</div>
			  		</div>
			  		<div class="box_bottom">
			  			<div class="bottom_left">
			  				2018-10-10  20:14:40创建
			  			</div>
			  			<div class="bottom_right">
			  				2018-10-10  20:14:40同步
			  			</div>
			  		</div>
			  	</div>

			  	<div class="box3">
			  		<div class="box_top">
			  			<div class="top_left">
			  				已失效
			  			</div>
			  			<div class="top_right">
			  				订单编号：225415441778
			  			</div>
			  		</div>
			  		<div class="box_middle">
			  			<div class="middle_left">
			  				<img src="/static/img/good.png" alt="">
			  			</div>
			  			<div class="middle_right">
			  				巴诺斯顿风暖浴霸，集成吊顶风暖浴霸，多功
							能纤维金属，超博空调型浴霸
			  			</div>
			  		</div>
			  		<div class="box_center">
			  			<div class="center_left">
			  				<p>付款金额</p>
			  				<p>￥0.00</p>
			  			</div>
			  			<div class="center_right">
			  				<p>预估抽成</p>
			  				<p style="color:#ff681f">￥0.00</p>
			  			</div>
			  		</div>
			  		<div class="box_bottom">
			  			<div class="bottom_left">
			  				2018-10-10  20:14:40创建
			  			</div>
			  			<div class="bottom_right">
			  				2018-10-10  20:14:40同步
			  			</div>
			  		</div>
			  	</div>
			</van-list>
		  </van-tab>
		  <van-tab title="I 级订单">内容 2</van-tab>
		  <van-tab title="II 级订单">内容 3</van-tab>
		  <van-tab title="团队订单">内容 4</van-tab>
		</van-tabs>
	</div>
</template>

<script>
    export default {
        name: "order",
        data() {
        	return{
        		loading: true,
        		active: 'true',
        		isShow: false,
        		title: '淘宝订单',
        	}
        },
        methods:{
        	show_tab(){
        		this.isShow=!this.isShow;
        		console.log("ddd");
        	},
        	changeTitle($event){
        		console.log($event.target.innerText);
        		this.title=$event.target.innerText;
        		this.isShow=false;
        	},
        	hideTab($event){
        		console.log($event);
        		if($event.target.className!=='down'){
        			this.isShow=false;
        		}
        	},
        	onClickLeft() {
		      
		    },
        }
    }
</script>

<style scoped>
	#order{
		width: 100%;
		height: 100%;
		background-color: #f5f5f5;
		font-size: 1rem;
		font-family: PingFang-SC-Regular;
		color: #000000;
	}
	.down{
		display: inline-block;
		width: 0px;
	    height: 0px;
	    border-width: 0.3rem;
	    border-style: solid;
	    border-color: black transparent  transparent  transparent ;
	}
	.down_tab{
		display: flex;
		flex-direction:column;
		justify-content: flex-start;
		background-color: #ededed;
	}
	.down_tab>span:hover{
		background-color: red;
	}
	.box{
		width: 100%;
		display: flex;
		margin-left: -1px;
	}
	.box>div{
		height: 2rem;
		width: 25%;
		line-height: 2rem;
		text-align: center;
		color: #ff681f;
		border: 1px solid #ff681f;
		border-right: none;
	}
	.box .active{
		background-color: #ff681f;
		color: #ffffff;
	}
	
	.box2{
		background-color: #ffffff;
		color: #000000;
		padding: 1rem 1rem;
	}

	.box3{
		padding: 1rem;
		background-color: #ffffff;
		margin: 1rem 0;
	}

	.box_top,.box_middle,.box_center,.box_bottom{
		margin-bottom: 1rem;
	}

	.box_top{
		display: flex;
		justify-content: space-between;
	}
	.top_left{
		width: 4rem;
		height: 2rem;
		background-color: #c6c5c3;
		text-align: center;
		line-height: 2rem;
		color: #ffffff;
	}

	.top_right{
		height: 2rem;
		line-height: 2rem;
		text-align: right;
	}

	.box_middle{
		display: flex;
		justify-content: space-between;
	}
	.middle_left{
		margin-right: 1rem;
	}
	.middle_left img{
		width: 5rem;
		height: 4rem;
	}
	.middle_right{
		text-align: left;
	}

	.box_center{
		display: flex;
		justify-content: space-between;
	}

	.box_center p{
		margin-bottom: 1rem;
	}
	
	.box_bottom{
		display: flex;
		justify-content: space-between;
		color: #8a8a8a;
		font-size: 0.8rem;
		border-top: 1px solid #f5f5f5;
		padding: 0.3rem 0;
	}
</style>